<template>
    <div>
        <div class="testBg relative"></div>
        <div class=" flex flexCenter">
            <div class=" box relative">
                <div class="whiteBg ss">
                    <div class="top"  @click="goSee">
                        <div class="num colorfff center wd100"><span class=" fontSize32"> {{currentIndex + 1}} </span> / {{len}}</div>
                        <img src="../../assets/image/topBg.png" />
                    </div>
                    
                    <div class="fontbold fontSize16">{{currentSub.title}}</div>
                    <div class="mt40 mb20">
                        <div class="sameBtnsty mb20" :class="{'oraBg colorfff':currentSub.checkVal==item.value}" v-for="(item,index) in currentSub.option" :key="index" @click="goCheck(item)">{{item.name}}</div>
                    </div>
                </div>
                
                <div class="flex flexAround">
                    <div class="preSub sameSub center oraBorder" @click="goOperate(1)" v-show="currentIndex >= 1">上一题</div>
                    <div class="nextSub sameSub center oraBorder" @click="goOperate(2)" v-if="currentIndex+1!= len">下一题</div>
                    <div class="nextSub sameSub center borderBlue colorBlue" @click="goSave" v-if="currentIndex+1== len">完成答题</div>
                    
                </div>
                <div class="color999 fontSize12 linkSituation center mt40" @click="goSee">查看答题情况</div>
            </div>
            
        </div>
        <van-popup v-model="isBox" round closeable position="bottom" :style="{ height: '10rem' }">
            <div>
                <div class="center mt20 fontSize16 fontbold">答题列表</div>
                <div class="flex flexWrap subList flexCenter" v-show="len>0">
                    <div v-for="(item,index) in subjectList" @click="goChangeSub(index)" :key="index" class="subIcon mb20 center mr10" :class="{'oraBg colorfff':item.checkVal!=''}">{{index+1}}</div>
                </div>
            </div>
        </van-popup>
    </div>
</template>
<script>
import {Toast,Dialog} from 'vant';
import {GetQueryStr} from '@/common/common'
// import VConsole from 'vconsole'
// let vConsole=new VConsole()

export default {
    name:'subjectList',
    data(){
        return {
            isBox:false,
            subjectList:[],
            arr:[],
            currentIndex:0,
            currentSub:{},
            isFlag:true,
            len:0
        }
    },
    created(){
        let token=GetQueryStr('token')
        if(token&&token!==''){
            localStorage.setItem('token',token)
        }
        this.getResult()
               
    },
    methods:{
        getResult(){
            let that=this
            // Toast.loading({
            //     message: '加载中',
            // })
            this.$apiRequest.getResultmbti({admin_id:''}).then(res=>{
                console.log('评测结果',res)   
                Toast.clear()
                if(res.code==1){
                    if(res.data.status==1){ //status: 1-已答题  2-未答题
                        this.$router.replace('result')
                    }else{
                        this.getProblemList()
                    }
                }
            })
        },
        getProblemList(){
            Toast.loading({
                message: '加载中',
            })
            this.$apiRequest.getProblemList({}).then(res=>{
                console.log('问题列表',res)
                Toast.clear()
                if(res.code==1){
                    let list=res.data.subject
                    list.map(i=>{
                        i.checkVal=''
                    })
                    this.subjectList=list
                    this.len=list.length
                    this.currentSub=list[this.currentIndex]
                }else{
                    Toast(res.msg)
                }
            })
        },
        goSee(){
            this.isBox=true
            this.isFlag=true
        },
        goCheck(info){
            let that=this
            if(!this.isFlag){
                return
            }
            this.isFlag=false
            this.subjectList[this.currentIndex].checkVal=info.value
            setTimeout(()=>{
                this.isFlag=true
                this.currentIndex + 1 != this.len?this.currentIndex++:''
                this.currentSub=this.subjectList[this.currentIndex]
            },500)
        }, 
        goChangeSub(index){//列表选题
            this.currentIndex=index
            this.isBox=false
            this.currentSub=this.subjectList[this.currentIndex]
        },
        goOperate(num){//上一题 /下一题
            num==1?this.currentIndex--:this.currentIndex++
            this.currentSub=this.subjectList[this.currentIndex]
        },
        goSave(){
            let that=this
            let nocheckArr=[]
            let checkArr=[]
            this.subjectList.map(i=>{
                if(i.checkVal==''){
                    nocheckArr.push(i)
                }else{
                    let obj={
                        number:i.number,
                        option:i.checkVal
                    }
                    checkArr.push(obj)
                }
            })
            if(nocheckArr.length>0){
                this.isFlag=true
                Toast('还有未完成的题目')
                return
            }
            Dialog.confirm({
                title: '提示',
                message: '确定提交嘛?',
            })
            .then(() => {
                that.saveData(checkArr)
            })
            .catch(() => {});
        },
        saveData(arr){
            let that=this
            Toast.loading({
                message: '提交中...',
                forbidClick: true,
                overlay:true
            });
            this.$apiRequest.goSaveSub({option:arr}).then(res=>{
                console.log('保存状态',res)
                if(res.code==1){
                    Toast.success('提交成功')
                    setTimeout(function(){
                        that.$router.replace('result')
                    },1500)
                }else{
                    Toast(res.msg)
                }
            })
        }
    }
}

</script>
<style lang='less' scoped>
.mt40{
    margin-top: 0.6rem;
}
.testBg{
    width: 100%;
    height: 3rem;
    background-color: #4873c1;
    border-radius: 0 0 1.2rem 1.2rem;
    
}
.box{
    position: absolute;
    top: 1rem;
    width: 90%;
    margin: 0 auto;
    max-width: 7rem;
    .ss{
        padding: 1rem 0.4rem 0.4rem 0.4rem;
        border-radius: 0.1rem;
        box-shadow:0 0  0.3rem #ccc;
    }
    .top{
        position: absolute;
        top: -0.6rem;
        left:50%;
        transform: translateX(-50%);
        .num{
            position: absolute;
            top:-0.1rem;
            left:50%;
            transform: translateX(-50%);
        }
    }
    img{
        width: 3rem;
    }
    .sameBtnsty{
        width: 100%;
        padding: 0.24rem 5%;
        border:1px #ddd solid;
        border-radius: 0.6rem;
    }
    .sameSub{
        width: 2.8rem;
        padding: 0.14rem 0;
        border-radius: 0.6rem;
        
        margin-top: 1rem;
    }
    .linkSituation{
        text-decoration: underline;
    }
    
}
.subList{
    width: 90%;
    margin: 0.4rem auto 0 auto;
    max-height: 8rem;
    overflow: scroll;
    .subIcon{
        width: 1rem;
        padding: 0.1rem;
        border: 1px #ddd solid;
        border-radius: 0.1rem;
    }
}
.oraBg{background-color: #f8954e;}
.borderBlue{border:1px #4873c1 solid !important}
.oraBorder{border:1px #f8954e solid;
        color: #f8954e;}
</style>